<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            margin: auto;
            width: 500px;
            height: 500px;
            border: 2px solid #000;
            text-align: center;
        }

        #btn {
            width: 200px;
        }

        #box p {
            font-size: 12px;
            color: red
        }

        table {
            border: 2px solid #000;
        }

        table tr td {
            width: 100px;
            height: 50px;
            border: 1px solid #000;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="box">
        <h2 id="h2q">账户注册</h2>
        <span>用户名：</span><input type="text" id="yh" onblur="fun1(this)"><p id="p1q"></p>
        <span>密码：</span><input type="password" id="mm" onblur="fun2(this)"><p id="p2q"></p>
        <span>确认密码：</span><input type="password" id="qr" onblur="fun3(this)"><p id="p3q"></p>
        <span>邮箱：</span><input type="text" id="yx" onblur="fun4(this)"><p id="p4q"></p>
        <span>手机号：</span><input type="text" id="sj" onblur="fun5(this)"><p id="p5q"></p>

        <button id="btn" onclick="clickfn1()">注册</button>
    </div>
    <button onclick="shanchu()">批量删除</button>
    <button onclick="clickfn1()">添加</button>
    <table>
        <tr>
            <td> <input type="checkbox" value="全选" id="qx" onchange="qxfun(this)">全选</td>
            <td>用户名</td>
            <td>手机号</td>
            <td>邮箱</td>
            <td>注册时间</td>
            <td>密码</td>
            <td>操作</td>
        </tr>
    </table>


    <script>
        /* 储存表单里的值 */
        var data = {
            username: '',
            pwd: '',
            email: '',
            phone: ''
        }

        /* 添加表格 */
        function clickfn1() {
            var _tr = document.createElement('tr'),
                _td1 = document.createElement('td'),
                _td2 = document.createElement('td'),
                _td3 = document.createElement('td'),
                _td4 = document.createElement('td'),
                _td5 = document.createElement('td'),
                _td6 = document.createElement('td'),
                _td7 = document.createElement('td');
            _td1.innerHTML = `<input type="checkbox" name="inpo" onchange="changefun()"/>`
            _td2.innerHTML = data.username
            _td3.innerHTML = data.phone
            _td4.innerHTML = data.email
            _td5.innerHTML = getNowTime()
            _td6.innerHTML = "<span>*******</span>" +
                `<span style="display:none">${data.pwd}</span><button onclick="showpwd(this)">显示密码</button>`
            _td7.innerHTML = `<button id="btn4" onclick="scfun()">删除</button> `

            _tr.appendChild(_td1)
            _tr.appendChild(_td2)
            _tr.appendChild(_td3)
            _tr.appendChild(_td4)
            _tr.appendChild(_td5)
            _tr.appendChild(_td6)
            _tr.appendChild(_td7)
            document.getElementsByTagName('table')[0].appendChild(_tr)
        }
        /*删除 */
        function scfun() {
        document.getElementById("btn4").parentNode.parentNode.remove();
    }
        /*批量删除*/
        function shanchu(){
            // var inpy = document.getElementsByName("inpo")
            var  checkArray = document.getElementsByName("inpo")
            //循环所有的选项
            for(let i = 0; i < checkArray.length; i++) {
            //判断是否被选中
                if(checkArray[i].checked) {
                    //当复选框被选中时进行删除
                    //获取最高的节点
                    let tbody = checkArray[i].parentNode.parentNode.parentNode;
                    //获取被选中的这一行
                    let tr = checkArray[i].parentNode.parentNode
                    //进行删除
                    tbody.removeChild(tr);          
                    //删除当前行,他的下一行移到了当前的位置,但是i++之后,不会再走到这一行
                    //使用i-- 在退回到这一行做一次判断
                    i--;
                }
        }
    }
         /* 全选 */
        function qxfun() {
            var inpy = document.getElementsByName("inpo")
            for (var i = 0; i < inpy.length; i++) {
                inpy[i].checked = document.getElementById("qx").checked   
                           
            }  

        }

        /* 反选 */
        function changefun() {
        var inpy = document.getElementsByName("inpo")
         var flag = true
        for (var j = 0; j < inpy.length; j++) {
                 if (inpy[j].checked == false) {
                flag = false  //复选框没有全部选中时，全选为flase，不执行
                 break;
                } 
         }
         document.getElementById("qx").checked = flag
        }


        /* 显示隐藏密码 */
        function showpwd(obj) {
            if (obj.innerHTML == '隐藏密码') {
                obj.innerHTML = '显示密码'
                obj.previousSibling.style.display = 'none'
                obj.previousSibling.previousSibling.style.display = 'block'
            } else {
                obj.innerHTML = '隐藏密码'
                obj.previousSibling.style.display = 'block'
                obj.previousSibling.previousSibling.style.display = 'none'
            }
        }
        /* 注册时间 */
        function getNowTime() {
            var dtime = new Date();
            // console.log(dtime) /01kaoshi.html:158 Tue Dec 14 2021 14:21:18 GMT+0800 (中国标准时间)
            var nian = dtime.getFullYear(),
                yue = dtime.getMonth() + 1,
                day = dtime.getDate(),
                hours = dtime.getHours(),
                fen = dtime.getMinutes(),
                miao = dtime.getSeconds()
            return nian + "-" + yue + "-" + day + " " + hours + ":" + fen + ":" + miao
        }

        /* 用户名 */
        function fun1(obj) {
            var yong = obj.value
            var hu = /^\w{6,12}$/g
            if (!yong) {
                obj.nextSibling.innerHTML = "用户名不能为空"
                return false

            } else if (hu.test(yong) == false) {
                obj.nextSibling.innerHTML = "用户名只能是6-12位数字字母下划线"
                return false
            } else {
                obj.nextSibling.innerHTML = "正确"
                data.username = yong
                return true
            }
        }
        /* 密码 */
        function fun2(obj) {
            var mi = obj.value
            var ma = /^[^d]{6,}$/g
            if (!mi) {
                obj.nextSibling.innerHTML = "密码不能为空"
                return false
            } else if (ma.test(mi) == false) {
                obj.nextSibling.innerHTML = "密码不正确(6位以上)"
                return false
            } else {
                obj.nextSibling.innerHTML = "正确"
                data.pwd = mi
                return true
            }
        }
        /* 确认密码 */
        function fun3(obj) {
            var mi = document.getElementById("qr").value
            var que = obj.value
            if (!que) {
                obj.nextSibling.innerHTML = "再次填写密码不能为空"
                return false
            } else if (que == mi) {
                obj.nextSibling.innerHTML = "正确"
                return true
            } else {
                obj.nextSibling.innerHTML = "再次填写密码不正确(6位以上)"
                return false
            }
        }
        /* 邮箱 */
        function fun4(obj) {
            var you = obj.value
            var xiang = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/g
            if (!you) {
                obj.nextSibling.innerHTML = "邮箱不能为空"
                return false
            } else if (xiang.test(you) == false) {
                obj.nextSibling.innerHTML = "邮箱格式输入错误"
                return false
            } else {
                obj.nextSibling.innerHTML = "正确"
                data.email = you
                return true

            }
        }
        /* 手机号 */
        function fun5(obj) {
            var shou = obj.value
            var ji = /^1[2-9]\d{9}$/g
            if (!shou) {
                obj.nextSibling.innerHTML = "手机号不能为空"
                return false
            } else if (ji.test(shou) == false) {
                obj.nextSibling.innerHTML = "手机号输入错误（仅限11位，第一个数字为1）"
                return false
            } else {
                obj.nextSibling.innerHTML = "正确"
                data.phone = shou
                return true
            }
        }

         /* 注册成功/失败 */
        document.getElementById("btn").addEventListener("click", clickfn2);

        function clickfn2() {
            var pq = document.getElementsByTagName("p")
            for (k = 0; k < pq.length; k++) {
                if (pq[k].innerHTML == "正确") {
                    alert("注册成功")
                    break
                } else {
                    alert("注册失败")
                    break
                }

            }

        }
    </script>
</body>

</html>